<template>
  <div class="login-root">
    <div class="logo-box">
      <img src="@/assets/images/login/logo.png" alt="" />

      <div class="logo-text">
        <span>b</span>
        <span>q</span>
        <span>u</span>
        <span>a</span>
        <span>n</span>
        <span>t</span>
      </div>

      <div class="title">币宽欢迎你</div>
    </div>

    <div class="main">
      <van-form @submit="onSubmit">
        <div class="input-box flex">
          <van-field
            name="username"
            v-model="username"
            :error="false"
            placeholder="请输入用户名"
            :rules="[
              { required: true, message: '请填写用户名', trigger: 'onBlur' },
            ]"
          />
        </div>

        <div class="input-box flex">
          <van-field
            name="password"
            v-model="password"
            type="password"
            placeholder="请输入密码"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'onBlur' },
            ]"
          />
        </div>

        <div class="input-box flex">
          <van-field
            name="code"
            v-model="code"
            type="code"
            placeholder="请输入验证码"
            :rules="[
              { required: true, message: '请输入验证码', trigger: 'onBlur' },
            ]"
          />
          <div class="code">
            <Code @code="getCode" :refresh="refresh" />
          </div>
        </div>
        <div class="input-box flex" style="padding-left: 0px;">
          <van-button round block native-type="submit" class="btn-box"
            >登录</van-button
          >
        </div>
      </van-form>
      <div class="register-box" @click="$router.push('register')">
        没有账号？ 去注册
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "@/mixin.js";
import { USER_LOGIN } from "@/api/api.js";
import { Toast } from "vant";
import { setLocalStorage } from "@/util/local-storge.js";
import Code from "../../assets/components/Code/Code";

export default {
  name: "login",
  mixins: [mixin],
  data() {
    return {
      code: "",
      username: "",
      password: "",
      random: "", // 随机生成验证码
      refresh: false, // 刷新验证码
    };
  },
  components: {
    Code,
  },
  mounted() {
    //如果是注册过来得 直接填充用户名
    if (this.$route.params.username) {
      this.username = this.$route.params.username;
    }
  },
  methods: {
    onSubmit(values) {
      // console.log(this.show);
      // console.log('submit', values);
      this.login(values);
    },

    async login(values) {
      if (this.code.toLowerCase() === this.random.toLowerCase()) {
        const { data } = await this.$reqPost(USER_LOGIN, values);
        if (data.status == 0) {
          Toast.fail(data.info);
        }
        if (data.status == 1) {
          let token = data.data.token;
          localStorage.removeItem("token");
          setLocalStorage({
            user_token: token,
          });
          let that = this;
          Toast.success({
            message: "登录成功!",
            onClose: function() {
              that.$router.push({ name: "RouterView" });
            },
          });
        }
      } else {
        this.refresh = !this.refresh;
        Toast.fail("请输入正确验证码");
        this.getCode();
      }
    },

    getCode(data) {
      this.code = "";
      this.random = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.login-root {
  min-height: 100vh;
  width: 100%;
  background-color: #1f87fd;
  // background: url("../../assets/images/login/bg.png");
  // background-size: cover;

  .logo-box {
    margin-top: 1.54rem;

    img {
      width: 1.8rem;
      height: 1.8rem;
    }

    .logo-text {
      color: #4ddcdf;
      margin-top: -0.7rem;

      span {
        font-size: 0.48rem;
        margin: 0 0.1rem;
      }
    }

    .title {
      color: #fff;
      font-size: 0.7rem;
      font-weight: 300;
      margin-top: -0.25rem;
    }
  }

  .main {
    margin-top: 1rem;
    .input-box {
      position: relative;
      background: #6bc5e0;
      margin: 0 0.7rem;
      height: 0.98rem;
      border-radius: 0.49rem;
      padding-left: 0.45rem;
      margin-bottom: 0.4rem;
    }

    .btn-box {
      //margin: 0 0.7rem;
      font-size: 0.3rem;
      background-color: #fff;
      height: 0.98rem;
      line-height: 0.98rem;
      color: #4495ed;
      border-radius: 0.49rem;
    }

    .register-box {
      font-size: 0.24rem;
      color: #fff;
      margin-top: 0.3rem;
    }

    .img {
      position: absolute;
      right: 0.4rem;
    }

    .code {
      margin-top: 0.1rem;
      margin-right: 0.35rem;
    }
  }

  /deep/.van-cell::after {
    border-bottom: none;
  }
}
</style>
